<template>
	<view class="service-box flex items-center justify-center">
		<img class="bg-img" src="https://hlximage.xiangle6.cn/home/images/1d36e70f-5876-445a-b48c-70b5469588f8.png" alt="">
		<scroll-view scroll-y class="btn-box">
			<view v-for="i in dataList" :key="i.id" class="a" @click="intoDetail(i.id, i.title)">{{ i.title }}</view>
		</scroll-view>
		<Loading ref="loading"></Loading>
	</view>
</template>

<script>
	import { request } from '@/utils/request.js'
	import Loading from '@/components/loding.vue'
	
	export default {
		data() {
			return {
				dataList: [],
				// bg: require('../../static/service@2x.png'),
			}
		},
		components: {
			Loading,
		},
		methods: {
			intoDetail(type, title) {
				uni.navigateTo({
					url:`/pages/serviceDetail/serviceDetail?type=${type}&title=${title}`
				})
			},
		},
		onLoad() {
			this.$refs.loading.init()
			this.$refs.loading.progress = 100
			// setTimeout(() => {
			// 	this.$refs.loading.destoryed()
			// }, 1000)
			request('/api/hlx-article/list', { articleTypeId: 1 }, 'get').then(res => {
				this.$refs.loading.destoryed();
				if (res.data.code === 200) {
					this.dataList = res.data.rows
				}
			})
		}
	}
</script>

<style scoped lang="less">
.service-box {
	/* background: url(../../static/service@2x.png); */
	height: 100vh;
	position: relative;
}
.bg-img {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
}
.btn-box {
	width: 426rpx;
	height: 600rpx;
	margin-top: 400rpx;
}
.service-box .a,
.service-box .b {
	height: 88rpx;
	font-size: 32rpx;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	line-height: 88rpx;
	border-radius: 16rpx;
	background: #E30E0E;
	margin-bottom: 36rpx;
	&:nth-child(2n) {
		background: #FF2E00;
	}
}
// .service-box 
</style>
